<template>
	<view class="register-container">

		<!-- 登录表单 -->
		<view class="login-form">
			<!-- 手机号输入框 -->
			<view class="input-item">
				<view style="width: 180rpx;"><text class="label">手机号</text></view>
				<input type="tel" v-model="formData.mobile" placeholder="填写手机号" placeholder-class="placeholder" />
			</view>

			<!-- 验证码输入框 -->
			<view class="input-item">
				<view style="width: 180rpx;"><text class="label">验证码</text></view>
				<view class="code-container">
					<input type="text" v-model="formData.code" placeholder="填写验证码" placeholder-class="placeholder" />
					<view @click="getVerificationCode" class="get-code">{{ codeMsg }}</view>
				</view>
			</view>

			<!-- 密码输入框 -->
			<view class="input-item">
				<view style="width: 180rpx;"><text class="label">密码</text></view>
				<input type="password" 
					v-model="formData.password" placeholder="填写新密码" placeholder-class="placeholder" class="password" 
					:password="!showPassword"
				/>
				<image :src="showPassword ? '/static/public/eye-open.png' : '/static/public/eye-close.png'"
					mode="aspectFit" class="eye-icon" @click="togglePasswordVisibility" />
			</view>

			<!-- 确认密码输入框 -->
			<view class="input-item">
				<view style="width: 180rpx;"><text class="label">确认密码</text></view>
				<input type="password" v-model="formData.confirmPassword" placeholder="填写新密码" placeholder-class="placeholder"
					:password="!showConfirmPassword" class="confirmPassword" />
				<image :src="showConfirmPassword ? '/static/public/eye-open.png' : '/static/public/eye-close.png'"
					mode="aspectFit" class="eye-icon" @click="toggleConfirmPasswordVisibility" />
			</view>
			
			<!-- 隐私政策选项 -->
			<view class="privacy-section">
				<u-radio-group v-model="privacyChecked">
					<image :src="privacyChecked ? '/static/public/checked.png' : '/static/public/unchecked.png'"
						mode="aspectFit" style="width: 32rpx; height: 32rpx;margin:2rpx 10rpx 0 0;"
						@click="privacyChecked = !privacyChecked" />
					<text class="privacy-text">阅读并同意</text>
					<text class="privacy-link" @click="openPrivacyPolicy">《平台隐私政策》</text>
					<!-- <text class="privacy-text">与</text>
					<text class="privacy-link" @click="openSecurityAgreement">《安全协议》</text> -->
				</u-radio-group>
			</view>
		</view>

		<!-- 确认注册按钮 -->
		<view class="confirm-btn" @click="handleRegister">
			确认注册
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeMsg: '获取验证码',
				showPassword: false,
				showConfirmPassword: false,
				privacyChecked: false,
				
				formData: {
					mobile: '',
					code: '',
					password: '',
					confirmPassword: '',
					nickname: ''
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword
			},
			toggleConfirmPasswordVisibility() {
				this.showConfirmPassword = !this.showConfirmPassword
			},
			async getVerificationCode() {
				if (this.codeMsg !== '获取验证码') {
					return
				}
				if (!this.formData.mobile) {
					uni.$u.toast('请填写手机号账号')
					return
				}
				await this.$http_api.sendSmsCode({ mobile: this.formData.mobile, scene: 1 });
				uni.$u.toast('验证码已发送')

				let countdown = 60
				this.codeMsg = `${countdown} 秒后重试`
				const interval = setInterval(() => {
					if (countdown > 0) {
						countdown--
						this.codeMsg = `${countdown} 秒后重试`
					} else {
						clearInterval(interval)
						this.codeMsg = '获取验证码'
					}
				}, 1000)
			},
			handleRegister() {
				const { mobile, code, password, confirmPassword, nickname } = this.formData;
				// 注册逻辑
				if (!mobile || !code || !password || !confirmPassword) {
					uni.$u.toast('请填写完整信息')
					return
				}
				if (password !== confirmPassword) {
					uni.$u.toast('两次密码输入不一致')
					return
				}
				this.formData.nickname = mobile;
				if (!this.privacyChecked) {
					uni.$u.toast('请先同意隐私政策')
					return
				}
				this.$http_api.mobileRegister(this.formData).then(res => {
					uni.$u.toast('注册成功')
					setTimeout(() => uni.navigateTo({ url: '/pages/public/phoneLogin' }), 1000)
				})
			},
			// 打开隐私政策
			openPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages/rich/index?type=1'
				})
			},
			// 打开安全协议
			openSecurityAgreement() {
				uni.navigateTo({
					url: '/pages/rich/index?type=2'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-container {
		padding: 40rpx 15rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		min-height: calc(100vh - 80px);
	}

	.nav-header {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		margin-top: 60rpx;

		.header-title {
			flex: 1;
			text-align: center;
			font-size: 36rpx;
			font-weight: 500;
			margin-right: 40rpx;
		}
	}

	.login-form {
		margin-top: 60rpx;
		width: 85%;

		.input-item {
			position: relative;
			border-bottom: 2rpx solid #EEEEEE;
			margin-bottom: 40rpx;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			font-weight: 600;

			.label {
				font-size: 32rpx;
				color: #353535;
				display: block;
				margin-top: 2rpx;
				width: 160rpx;
			}

			input {
				font-size: 30rpx;
				padding: 10rpx 0;
				color: #353535;
			}

			.placeholder {
				color: #939AA8;
				font-weight: 400;
				font-size: 29rpx;
			}


			.eye-icon {
				position: absolute;
				right: 0;
				bottom: 30rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.code-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: calc(100% - 180rpx);

			.get-code {
				width: 206rpx;
				height: 59rpx;
				border: 1rpx solid #1C6EFB;
				font-size: 22rpx;
				line-height: 59rpx;
				text-align: center;
				color: #1C6EFB;
				font-weight: 400;
				border-radius: 5px;
			}
		}
	}

	.privacy-section {
		width: 100%;
		margin: 60rpx 0;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.privacy-text {
			font-size: 26rpx;
			color: #CED5E2;
			margin: 0 4rpx;
		}

		.privacy-link {
			font-size: 26rpx;
			color: #42E0A2;
		}
	}

	.confirm-btn {
		position: fixed;
		bottom: 100rpx;
		left: 40rpx;
		right: 40rpx;
		height: 95rpx;
		line-height: 95rpx;
		background: #2993FF;
		border-radius: 69rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		max-width: 554rpx;
		margin: 0 auto;
	}
</style>